<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <meta name="keywords" content=""/>
  <title>Regexp</title>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="./css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="./js/bootstrap.min.js"></script> 
  <style>
    .click{
        cursor: pointer;
        color: olivedrab;
    }
  
  </style>
 </head>
 <body>
    
    1.使用字符串对象将字符串 “马小腾，马小腾”  马小腾替换成huge
    <br>
    2. 声明一个函数，用来识别当前页面所在的浏览器是什么浏览器。
    如果是IE6、IE7，那么就让当前页面跳转到 	http://www.baidu.com/s?wd=谷歌浏览器
    <br>
    3. 声明一个函数，实现两个文本输入框内容的加减乘除运算。
    <div class="mul clearfix">
        <div class="form-group col-md-2">
            数字1：<input type="text" value="9">
        </div>
        <div class="form-group col-md-4">
            <span class="col-md-3">运算符</span>
            <div id="sym col-md-5">
                <select class="form-control degree " name="sym" id="symbol">
                    <option>请选择</option>
                    <option class="symbol" value="+">+</option>
                    <option class="symbol" value="-">-</option>
                    <option class="symbol" value="*">*</option>
                    <option class="symbol" value="/">/</option>
                </select>
            </div>
        </div> 
        <div class="form-group col-md-2">
            数字2：<input type="text" value="2">
        </div>
        <button class="col-md-1">计算</button>
        <p class="col-md-12">结果：<span class="result">0</span></p>
    </div>
    <br>
    4. 实现点击链接3秒后跳转到http://wengdo.com
    <a class="click">点我跳转</a>
    <br>
    5. 声明一个函数，获取当前时间, 找两个项目，在头部输出动态的时钟
    <div class="time"></div>
    6. 使用bootstrap写课件里面的表单，给表单做js单条和全部验证
    
  <script>
    //1.使用字符串对象将字符串 “马小腾，马小腾”  马小腾替换成huge
    let str1 = '马小腾，马小腾';
    let q1 = str1.replace(/马小腾/g,'huge');
    console.log(q1);
    //2. 声明一个函数，用来识别当前页面所在的浏览器是什么浏览器。
    //如果是IE6、IE7，那么就让当前页面跳转到 	http://www.baidu.com/s?wd=谷歌浏览器
    let NV = function(){
        navigator.userAgent.search(/(MSIE6.0|Firefox|MSIE7.0)/)!=-1? 
        window.open('http://www.baidu.com/s?wd=谷歌浏览器', '_blank', 'width=300, height=200, left=100')
        :window.open('http://www.baidu.com', '_blank', 'width=300, height=200, left=100')
    }
    NV();
    // console.log(NV());
    //3.声明一个函数，实现两个文本输入框内容的加减乘除运算。 
    var mySelect = document.getElementById('symbol'); 
    //选项更变时   
    mySelect.onchange = function () { 
        //运算符               
        let syb = mySelect.options[mySelect.selectedIndex].value  
        //值1值2 结果 按钮
        let v1 = document.getElementsByTagName('input')[0].value;
        let v2 = document.getElementsByTagName('input')[1].value;
        let result = document.getElementsByClassName('result')[0];
        let btn = document.getElementsByTagName('button')[0];
        // console.log(syb)
        //倍数
        function b (a,b){
            let isAInt = Number.isInteger(a*1)
            let isBInt = Number.isInteger(b*1)
            if(isAInt&&isBInt){
                return 1
            }
            let aLastLen = String(a).length - 1
            let bLastLen = String(b).length - 1
            let aLen = aLastLen - (isAInt ? aLastLen : String(a).indexOf('.'))
            let bLen = bLastLen - (isBInt ? bLastLen : String(b).indexOf('.'))
            return 10**(aLen>bLen?aLen:bLen)
        }
        let base = b(v1,v2);
        // console.log(base)
        //计算函数
        //v1=x,v2=y,s=运算符,b=倍数
        function p(x,y,s,b){
            switch (s) {
                case '*':
                    return ((x*b).toFixed(0)*(y*b).toFixed(0))/ b**2
                    break;
                case '/':
                    return (x*b).toFixed(0)/(y*b).toFixed(0)
                    break;
                case '+':
                    return ((x*b).toFixed(0)*1 + (y*b)*1)/b
                    break;
                case '-':
                    return ((x*b).toFixed(0)-(y*b).toFixed(0))/b
                    break;
                default:
                    break;
            }
        } 
        //console.log(p(2,3,"+",base))
        //console.log(p(v1,v2,"+",base));
        //点击计算
        btn.onclick = () =>{
            let res = p(v1,v2,syb,base);
            // console.log(p(v1,v2,'-',base));
            return result.innerHTML = res;
        }
    }   
    //4.实现点击链接3秒后跳转到http://wengdo.com
    let a = document.getElementsByClassName('click')[0];
    a.onclick = function(){
        setTimeout("window.open('http://wengdo.com','_blank')", 3000)
    }

    //5. 声明一个函数，获取当前时间, 找两个项目，在头部输出动态的时钟
    let time = document.getElementsByClassName('time')[0];
    let getTime = function(){
        let today = new Date();
        let year = today.getFullYear();
        let month = today.getMonth()+1;
        let date = today.getDate();
        let hours = today.getHours();
        let minutes = today.getMinutes();
        let seconds = today.getSeconds();
        if(seconds < 10){
            seconds = "0" + seconds;
        }
        if(minutes < 10){
            minutes = "0" + minutes;
        }
        time.innerHTML = `<span>${year}年${month}月${date}日 ${hours}时${minutes}分${seconds}秒</span>`;
        // console.log(time.innerHTML)
    }
    setInterval('getTime()', 1000)
    

  </script>
 </body>
 </html>